<template>
    <!-- 今年流通量 -->
    <div class="bar-chart">
      <div class="chart_box" ref="chart_box" />
    </div>
  </template>
  
  <script>
  import { BarChart } from "echarts/charts";
import {
  GridComponent,
  LegendComponent,
  TooltipComponent,
} from "echarts/components";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
  // import { getApiDataList } from '@/api'
  
  echarts.use([
    GridComponent,
    LegendComponent,
    TooltipComponent,
    BarChart,
    CanvasRenderer,
  ]);
  
  export default {
    name: "barChart",
    props: {
      chartData: {
        type: Array,
        default: function () {
          return [];
        },
      },
    },
    data() {
      return {};
    },
    watch: {
      chartData: {
        handler(oldVal, newVal) {
          console.log(oldVal, newVal);
          this.initChart();
        },
      },
    },
    methods: {
      createOption(data) {
        const xAxisData = data.map((item) => item.devTypeName);
        const seriesData = [
          {
            name: "正常",
            data: [],
            colors: ["rgba(0,255,199,0.8)", "rgba(0,255,199,0)"],
          },
          {
            name: "警报",
            data: [],
            colors: ["rgba(247,65,108,0.8)", "rgba(247,65,108,0)"],
          },
          {
            name: "离线",
            data: [],
            colors: ["rgba(203,203,203,0.8)", "rgba(204,204,204,0)"],
          },
        ];
  
        // 建立状态名称和索引的映射
        const statusIndexMap = {
          "正常": seriesData.findIndex((item) => item.name === "正常"),
          "警报": seriesData.findIndex((item) => item.name === "警报"),
          "离线": seriesData.findIndex((item) => item.name === "离线"),
        };
  
        // 遍历数据，并根据状态直接添加数据到对应的索引位置
        data.forEach((item) => {
          seriesData[statusIndexMap["正常"]].data.push(item.normal);
          seriesData[statusIndexMap["警报"]].data.push(item.error);
          seriesData[statusIndexMap["离线"]].data.push(item.offline);
        });
  
        console.log(seriesData, 909090);
    
        let list = seriesData.map((item) => {
          return {
            name: item.name,
            type: "bar",
            data: item.data,
            barWidth: 10,
            barGap: 0.5, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: item.colors[0],
                  },
                  {
                    offset: 1,
                    color: item.colors[1],
                  },
                ]),
                // opacity: 0.8,
                borderRadius: [4, 4, 0, 0],
              },
            },
          };
        });
        console.log(list, 119119);
        return {
          // backgroundColor: '#02090d',
          tooltip: {
            //提示框组件
            trigger: "axis",
            backgroundColor: "#02090d",
            // formatter: (params) => {
            //     return params.value
            // },
            borderColor: "rgba(0, 243, 230, 0.4)", // 边框颜色
            axisPointer: {
              type: "shadow",
              label: {
                backgroundColor: "rgba(17, 27, 54, 1)",
              },
            },
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 14,
            },
          },
          grid: {
            left: "10%",
            right: "10%",
            bottom: "10%",
            top: "38%",
            //	padding:'0 0 10 0',
            containLabel: true,
          },
          legend: {
            //图例组件，颜色和名字
            right: "10%",
            top: "32%",
            itemGap: 16,
            itemWidth: 18,
            itemHeight: 10,
            selectedMode: false,
            data: seriesData,
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
          },
          xAxis: [
            {
              type: "category",
              // 	boundaryGap: true,//坐标轴两边留白
              data: xAxisData,
              axisLabel: {
                //坐标轴刻度标签的相关设置。
                //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                  color: "#9AAFC2",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 14,
                },
                rotate: 0,
              },
              axisTick: {
                //坐标轴刻度相关设置。
                show: false,
              },
              axisLine: {
                //坐标轴轴线相关设置
                lineStyle: {
                  color: "#506B98",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "数量",
              nameTextStyle: {
                color: "#9AAFC2",
                lineHeight: 20,
                padding: [0, 0, 10, 0],
              },
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: "#9AAFC2",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 14,
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#506B98",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: ["#fff"],
                  opacity: 0.06,
                },
              },
            },
          ],
          series: list,
        };
      },
      initChart() {
        if (this.chart) {
          this.chart.dispose();
        }
        if (!this.$refs.chart_box) return;
  
        this.chart = echarts.init(this.$refs.chart_box, "macarons");
        this.chart.setOption(this.createOption(this.chartData));
        this.tooltipLoop();
      },
      tooltipLoop() {
        // 提示框循环
        clearInterval(this.stackLoop);
  
        let length = this.chartData.length,
          index = 0;
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: index,
        });
        this.stackLoop = setInterval(() => {
          index = (index + 1) % length;
          this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: index,
          });
        }, 2000);
      },
    },
  
    mounted() {
      this.initChart();
    },
  };
  </script>
  
  <style lang="less" scoped>
  .bar-chart {
    width: 100%;
    height: 100%;
    // margin: 10px auto 0;
  
    .chart_box {
      width: 98%;
      height: 96%;
    }
  
    
  }
  </style>
  